Ruby on RailsにてBootstrap3のサンプルページを作成する
はじめに
サンプルアプリ等を作成する際、デザインに悩むことは多いかと思います。
(特にデザインセンスに乏しい私のようなプログラマは・・・)
このような時に、Bootstrapは強い味方となります。(今更感は強いですが・・・)
またBootstrapにはデザインのサンプルが用意されているので、このサンプルをベースとしてアプリを作っていけばデザインについて悩むことを減らすことができそうです。
今回はRuby on Rails 4 にBootstrap3を適用し、サンプルにある「Starter template」と同じページを作る 手順について纏めてみたいと思います。
作業手順
以下に、今回の作業手順を書いていきます。
1.ページ作成
まずはRuby on Railsにて、今回表示するページを作成します。
コントローラ、ビューの作成
今回表示する画面のコントローラは「welcome」、ビューは「index」とし、以下のコマンドを実行します。
$ rails g controller welcome index
ルートページの指定
config/routes.rb に、以下の定義を追加します。
root 'welcome#index'
2.Bootstrapの適用
Railsのアプリケーションに、BootstrapのCSS等を適用します。
今回はアプリケーションテンプレート等を自分で編集したいので、gem等は使用せずBootstrapのCSS、JavaScript等を自分でアプリケーション内に配置します。
これらについては、下記のサイトを参考にしました。(というより、手順自体はほぼ同じです。)
Ruby on Rails 4.0でBootstrap 3.0を使う
Twitter Bootstrap 3 in a Rails 4 Application
Bootstrapのファイルを配置
Bootstrapよりモジュールをダウンロードし、.zipファイルを解凍します。
解凍して出来た以下のフォルダの中身を、Railsアプリのvender/assetsフォルダ内にコピーします。
- fonts vender/assets/にフォルダ毎コピー
- css vender/assets/stylesheet/に、中にある.cssファイルをコピー
- js vender/assets/javascript/に、中にある.jsファイルをコピー
スタイルシートの設定
app/assets/stylesheets/application.css に以下を追加し、BootstrapのCSSを読み込むようにします。
*= require bootstrap
JavaScriptの設定
app/assets/javascripts/application.js に以下を追加し、BootstrapのJavaScriptを読み込むようにします。
//= require bootstrap
fontsの設定
config/application.rb の「class Application < Rails::Application」の中に以下を追加し、fontsフォルダを読み込むようにします。
config.assets.paths << "#{Rails}/vender/assets/fonts" [/ruby]
プリコンパイル
コマンドラインで以下を実行し、プリコンパイルします。
$ rake assets:precompile Rails_ENV=development
3.サンプルページの作成
Bootstrapのサンプルページと同じになるよう、アプリケーションテンプレート、個別ページを編集していきます。
基本的にはサンプルページのHTMLを参照し、同じとなるようRailsアプリを編集します。
アプリケーションテンプレート
app/views/layouts/application.html.erbを編集し、アプリ全体で共通となるレイアウトを定義していきます。
Bootstrapのサンプルページより、metaタグをheadタグ内に、ヘッダー部とその下のコンテナの宣言をbodyタグ内に、それぞれapplication.html.erbにコピーします。
コピーする箇所を、以下にソースとして挙げておきます。
<!DOCTYPE html>
<html>
<head>
(中略)
<meta content="width=device-width, initial-scale=1" name="viewport">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<%= yield %> <!-- ※この行は各ページを表示するための、最初から存在する。 -->
</div><!-- /.container -->
</body>
</html>
ちなみにmetaタグのコピーを忘れると、Mobileで表示した時にレスポンシブルにならなかったりします。
個別ページ
BootstrapのサンプルページのHTMLより、各ページごとに異なるであろう部分をapp/views/welcome/index.html.erbにコピーします。
<div class="starter-template"> <h1>Bootstrap starter template</h1> <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> </div>
モバイル向けCSSの作成
今回のサンプルページでは無くても動きますが、モバイルにて画像やフレームのレイアウトが崩れるのを防ぐためapp/assets/stylesheets/mobile.cssを作成し、以下の定義を記述します。
これについては、下記のサイトを参考にしました。
[WordPress] Twitter Bootstrap でモバイルテーマを組んでみたので、いろいろとまとめてみた
img {
max-width: 100%;
height: auto;
}
iframe {
max-width: 100%;
height: auto;
}
4.ページの確認
最後に作成したRailsアプリを起動し、PCとモバイルにて表示してみます。
(モバイルは今回はiPhoneシュミレータを使用しました。)
PC
モバイル
まとめ
Bootstrapのサンプルページをベースに、Railsアプリを作る際の参考になれば幸いです。
参考にさせて頂いたブログの方々、ありがとうございました。
